<!DOCTYPE HTML>

<!--
Copyright 2014 Chris Devers

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<html>
 <head>
  <meta charset="UTF-8">
  <title>Follow Me</title>
  <link rel="stylesheet" href="simon.css">
  
  <style type="text/css">
    body {
        margin:      0px;
        line-height: 0;
    }
  </style>
 </head>
 
 <body>
  <!-- Import all of the necessary Javascript files. -->
  <script type="text/javascript" src="button_events.js"></script>
  <script type="text/javascript" src="cookies.js"></script>
  <script type="text/javascript" src="game_helpers.js"></script>
  
  <!-- Game Screen -->
  <table style="width:50%;height:10%;font-size:16">
   <tr>
    <td>
	   <object data="images/back_button.svg" type="image/svg+xml" height="10%"></object><br>
	</td>
    <td>
	   <span style="color:red"> Lives Remaining:</span>
	   <span id="lifeCount" style="color:red"> </span>
    </td>
	<td>
	   <span style="color:yellow">Score: </span>
	   <span id="currentScore" style="color:yellow"> </span>
	</td>
   </tr>
  </table>
  <object id="button0" data="images/blue_game_button.svg" type="image/svg+xml" style="width:50%; height:45%"></object
  ><object id="button1" data="images/red_game_button.svg" type="image/svg+xml" style="width:50%; height:45%"></object
  ><object id="button2" data="images/green_game_button.svg" type="image/svg+xml" style="width:50%; height:45%"></object
  ><object id="button3" data="images/yellow_game_button.svg" type="image/svg+xml" style="width:50%; height:45%"></object>
  
  <script type="text/javascript">
    var startFlashingButtons, lightUpButton;
    
    // The Back button should send the user back to the main menu.
    var prevPage = "../simon.html";
    
    // For maximum modifiability, determine the number of buttons on the screen at runtime.
    var NUM_BUTTONS = 0;
    while (document.getElementById(numberToId(NUM_BUTTONS))) {
        NUM_BUTTONS += 1;
    }
    
    var BRIGHT_TO_DARK_TIME_RATIO   = 2;
    var INITIAL_BRIGHT_MILLISECONDS = 500;
    var MILLISECONDS_BEFORE_START   = 750;
    
    var flashing;                   // Tells whether the program is flashing buttons or waiting for user input.
    var allButtonsFlashing = false; // Whether all the buttons are currently flashing together
    
    var flashingButtonSequence; // This will hold values in [0..NUM_BUTTONS], each number corresponding to a button.
    var sequenceLength = 3;
    var numButtonsFlashed;      // The number of buttons flashed so far in the sequence, to track which is next.
    var numButtonsClicked;
    
    var rules; // An array mapping flashed buttons (indices) to the correct buttons to click (values), using the same number system as
               // in flashingButtonSequence.
    
    var lives = 3;
    var currentScore = 0;
	  /* Set the initial values displayed for score and lives. */
    document.getElementById("currentScore").innerHTML = currentScore;
    document.getElementById("lifeCount").innerHTML = lives;
    
    /* Starts the game by creating an initial sequence of buttons to flash and flashing the first one. */
    function start() {
        "use strict";
        
        var i;
        
        createNewButtonSequence();
        
        rules = [];
        for (i = 0; i < NUM_BUTTONS; i += 1) {
            rules[i] = getRule(i);
        }
        
        startFlashingButtons();
    }
    
    /* Begins the sequence of button flashes that the user must reproduce according to the current rules. */
    function startFlashingButtons() {
        "use strict";
        
        flashing = true;
        
        setTimeout(function() {
            lightUpButton(flashingButtonSequence[0], INITIAL_BRIGHT_MILLISECONDS);
         }, MILLISECONDS_BEFORE_START);
        
        numButtonsFlashed = 1;
    }
    
    /* Flashes the next button if the sequence has not yet been shown completely. */
    function nextStep() {
        "use strict";
        
        var button_number, i;
        
        if (numButtonsFlashed < sequenceLength) {
            button_number = flashingButtonSequence[numButtonsFlashed];
            lightUpButton(button_number, INITIAL_BRIGHT_MILLISECONDS);
            
            numButtonsFlashed += 1;
        }
        
        else if (flashing && !allButtonsFlashing) {
            // This serves as a signal to tell the user it's time to start pressing buttons.
            for (i = 0; i < NUM_BUTTONS; i += 1) {
                lightUpButton(i, INITIAL_BRIGHT_MILLISECONDS);
            }
            
            allButtonsFlashing = true;
        }
        
        else if (allButtonsFlashing) {
            allButtonsFlashing = false;
            flashing           = false;
            numButtonsClicked  = 0;
        }
    }
    
    /* Reacts to a click on any of the main game buttons. */
    function onGameButtonClick(evt) {
        "use strict";
        
        var element, button_number;
        
        // The player should press the buttons only after they finish flashing.
        if (flashing) {
            return;
        }
        
        element = getTarget(evt);
        for (button_number = 0; button_number < NUM_BUTTONS; button_number += 1) {
            if (document.getElementById(numberToId(button_number)).getSVGDocument() == element.ownerDocument) {
                break;
            }
        }
        
        if (isClickCorrect(button_number)) {
            numButtonsClicked += 1;
            currentScore += 1;
            document.getElementById("currentScore").innerHTML = currentScore;
            if (numButtonsClicked == sequenceLength) {
                sequenceLength += 1;
                createNewButtonSequence();
                startFlashingButtons();
            }
        } else {
            lives -= 1;
            document.getElementById("lifeCount").innerHTML = lives;
            if (lives > 0) {
                createNewButtonSequence();
                startFlashingButtons();
            } else {
                gameOver();
            }
        }
    }
    
    /* Lights up the button with the given number and sets a timer to darken it after the specified number of milliseconds. */
    function lightUpButton(button_number, milliseconds) {
        "use strict";
        
        var id, button, edge;
        
        id     = numberToId(button_number);
        button = document.getElementById(id);
        edge   = button.getSVGDocument().getElementById("edge");
        
        edge.setAttribute("style", edge.getAttribute("bright_text"));
        
        // WebKit-based browsers like Chrome and Safari will not redraw the button automatically.
        forceRedraw(button);
        
        setTimeout(function() {
            darkenButton(button, milliseconds / BRIGHT_TO_DARK_TIME_RATIO);
         }, milliseconds);
    }
    
    /* Darkens the button given as an argument and sets a timer to continue the game logic in the given number of milliseconds. */
    function darkenButton(button, milliseconds) {
        "use strict";
        
        var edge = button.getSVGDocument().getElementById("edge");
        
        edge.setAttribute("style", edge.getAttribute("dark_text"));
        
        // WebKit-based browsers like Chrome and Safari will not redraw the button automatically.
        forceRedraw(button);
        
        setTimeout(nextStep, milliseconds);
    }
    
    window.onload = start;
  </script>
 </body>
</html>